<template>
  <div class="forget-c">
    <div class="forget-b">
      <div class="title">
        <p>scrcnet</p>
        <p>scrcnet 平台数据管理系统</p>
      </div>
      <!-- 表单验证开始 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
      >
        <!-- 手机号 -->
        <el-form-item prop="tel">
          <el-input
            v-model="ruleForm.tel"
            placeholder="请输入注册时的手机号"
            clearable
            prefix-icon="el-icon-mobile"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <!-- <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="密码"
            clearable
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item> -->
        <!-- 验证码 -->
        <el-form-item prop="yan">
          <el-input
            v-model="ruleForm.yan"
            placeholder="验证码"
            clearable
            prefix-icon="el-icon-chat-line-square"
            autofocus
            style="width:210px;padding-right:10px"
          ></el-input>
          <el-button
            type="ghost"
            @click="showYz"
            :class="{ disabled: !this.canClick }"
            >{{ content }}</el-button
          >
        </el-form-item>
        <!-- 记住密码 -->
        <!-- <div class="forget">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <span @click="$router.push('/forget')" class="cursor"
            >忘记密码？</span
          >
        </div>

        <br />
        <br /> -->
        <!-- 登陆 -->
        <el-form-item>
          <el-button class="login-btn">找回密码</el-button>
        </el-form-item>
      </el-form>
      <!-- 社交账号登陆 -->
      <!-- <div class="social">
        <div class="soc cursor">
          社交账号登入
          <i class="fa fa-weixin fa-2x"></i>
          <i class="fa fa-qq fa-2x"></i>
          <i class="fa fa-weibo fa-2x"></i>
        </div>
        <div class="reg cursor" @click="$router.push('/register')">
          注册账号
        </div>
      </div> -->
      <div class="footer">
        <div class="top cursor">scrcnet</div>
        <div class="bottom cursor">
          <span>获取授权</span>
          <span>在线演示</span>
          <span>前往官网</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        // 手机号
        tel: "",
        // 短信验证码
        yan: ""
      },
      checked: true,
      canClick: true,
      content: "发送验证码",
      time: 10,
      //   表单校验规则
      rules: {
        // 手机号码验证
        tel: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: ["blur"]
          },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "目前只支持中国大陆的手机号码"
          }
        ]
        //    短信验证码
      }
    };
  },
  mounted() {},
  methods: {
    //   点击短信验证码
    showYz() {
      if (!this.canClick) return;
      this.canClick = false;
      let clock = window.setInterval(() => {
        this.time--;
        this.content = this.time + "s后再发";
        if (this.time < 0) {
          window.clearInterval(clock);
          this.content = "发送验证码";
          this.time = 10;
          this.canClick = true;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.forget-c {
  padding-top: 120px;

  .forget-b {
    width: 375px;
    height: 481px;
    margin: 0 auto;
    .title {
      text-align: center;
      padding: 20px;
      p:nth-child(1) {
        font-size: 30px;
        margin-bottom: 5px;
      }
      p:nth-child(2) {
        font-size: 16px;
        color: #999;
      }
    }
    .el-form {
      padding: 20px;
      .login-btn {
        background-color: #009688;
        color: #fff;
        width: 100%;
      }
      .forget {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        span {
          font-size: 14px;
          color: #029789;
        }
      }
    }
    .social {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      font-size: 14px;
      align-items: center;
      .soc {
        color: #999;
        i:nth-child(1) {
          color: aquamarine;
        }
        i:nth-child(2) {
          color: blue;
          padding: 0 8px;
        }
        i:nth-child(3) {
          color: red;
        }
      }
      .reg {
        color: #029789;
      }
    }
  }
  .footer {
    font-size: 14px;
    color: #999;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    .top {
    }
    .bottom {
      margin: 20px;
      span:nth-child(2) {
        margin: 0 20px;
      }
    }
  }
}
</style>
